import React, { Key, useEffect, useState } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table, Button } from "antd";
import { useParams, useNavigate } from "react-router-dom";
import {
  findScheduleListRequest,
  hosDepartmentListRequest,
  hosScheduleRuleRequest
} from "@/api/hospital/hospitallist";

import type {
  hosDepartmentListType,
  bookingScheduleListType,
  findScheduleListType
} from "@/api/hospital/model/hospitalListTypes";

export default function HospitalSchedule() {
  const navigate = useNavigate();
  // 接受params参数
  const { hoscode } = useParams()
  // 定义控制treeData的state
  const [treeData, setTreeData] = useState<hosDepartmentListType>([])
  //定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  //定义表格的数据
  const [sourceData, setSourceData] = useState<findScheduleListType>([]);


  //1 定义一个请求科室列表的函数
  const getDepartmentList = async () => {
    const result = await hosDepartmentListRequest(hoscode as string)
    // 把获到的科室数据交给state
    setTreeData(result)
    return result
  }

  // 2定义一个请求科室排班的函数
  const getScheduleRule = async (depcode: string) => {
    const result = await hosScheduleRuleRequest({
      page: page,
      limit: limit,
      hoscode: hoscode as string,
      depcode: depcode,
    })
    setTotal(result.total);
    setScheduleRule(result.bookingScheduleList);
    return result
  }
  //3.定义一个请求排班详情的函数
  const getFindScheduleList = async (workDate: string,depCode: string) => {
    const result = await findScheduleListRequest({
      hoscode: hoscode as string,
      depcode: depCode,
      workDate: workDate,

    })
    setSourceData(result);
  }

  // 初始化请求
  useEffect(() => {
    const getData = async () => {
      // 1请求科室列表得到科室列表的数据
      const departmentList = await getDepartmentList()
      // console.log(departmentList, "科室列表"); //返回一个科室列表数组
      // 2根据科室数据获取初始的科室信息（默认第一个科室的第一个门诊
      const initDepCode = (departmentList[0].children as hosDepartmentListType)[0].depcode;
      // console.log(initDepCode);//200040878
      // 3把初始的科室信息传递给 请求排班列表的函数，得到排班列表
      const scheduleRule = await getScheduleRule(initDepCode);
      console.log(scheduleRule);//包含排班列表的对象
      // 4根据排班列表，得到初始的排班列表的时间
      const initWordDate = scheduleRule.bookingScheduleList[0].workDate;
      // console.log(initWordDate);//2022-04-28
      // 5 根据排班列表的初始时间请求详细信息
      await getFindScheduleList(initWordDate, initDepCode);
    }
    getData();
  }, []);


  //1.改变页码的事件回调函数
  const changePageHandle = (page: number, limit: number) => {

    setLimit(limit);
  };

  // 2点击tree事件的回调函数
  const treeSelectHandle = (depCodeArr: Key[]) => {


  }

  // 3点击时间的事件函数 
  const scheduleRuleHandle = (workDate: string) => {
    return () => {


    };


  }

  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };

  // table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",

    },
    {
      title: "挂号费用",
      dataIndex: "amount",
      key: "address",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
      key: "address",
    },
  ];

  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>

          <div>
            <Tree treeData={treeData as []}
              style={treeStyle}
              fieldNames={{ title: "depname", key: "depcode" }}
              // 默认展开
              expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
              onSelect={treeSelectHandle}
            />
          </div>


        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
            {/* 顶部排班表格 */}
            {scheduleRule.map((item) => {
              return (
                <Tag key={item.workDate}
                  onClick={scheduleRuleHandle(item.workDate)}
                  style={{ cursor: "pointer" }}
                >
                  <p>{item.workDate}</p>
                  <p>
                    {item.availableNumber}/{item.reservedNumber}
                  </p>
                </Tag>
              );
            })}
          </div>
          {/* 分页 */}
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            onChange={changePageHandle}
          />
          {/* 底部表格 */}
          <Table columns={columns}
            style={{ marginTop: "20px" }}
            dataSource={sourceData}
            rowKey={"id"}
            bordered
            pagination={false}
          ></Table>

          <Button
            onClick={() => {
              navigate(-1);
            }}
            style={{ marginTop: "30px" }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
